<template>
	<main-content
		:class="{ showDetail: showDetail }"
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
		:type="!showDetail ? 'list' : 'hide'"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item
					:label="$t('common.belong_merchant') + ':'"
					prop="merchantId"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.all')"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="$t('agent.apply_time')"
					prop="applyTime"
				>
					<el-date-picker
						v-model="applyTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						style="width: 428px"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>

				<el-form-item
					:label="$t('agent.audit_complete_time')"
					prop="auditTime"
				>
					<el-date-picker
						v-model="auditTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						style="width: 428px"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<!-- 申请人 -->
				<el-form-item
					:label="$t('agent.apply_people')"
					prop="applyName"
				>
					<el-input
						v-model="queryData.applyName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<!-- 审核人 -->
				<el-form-item
					:label="$t('agent.audit_people')"
					prop="applyName"
				>
					<el-input
						v-model="queryData.auditName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<!-- 转代会员账号 -->
				<el-form-item
					:label="$t('agent.transfer_member_account')"
					prop="memberName"
				>
					<el-input
						v-model="queryData.memberName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<!-- 当前上级代理账号 -->
				<el-form-item
					label="当前上级代理账号"
					prop="currentProxyName"
				>
					<el-input
						v-model="queryData.currentProxyName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<!-- 代理账号 -->
				<el-form-item
					:label="$t('agent.transfer_in_agent_account')"
					prop="currentProxyName"
				>
					<el-input
						v-model="queryData.transferProxyName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<!-- 审核单号 -->
				<el-form-item label="审核单号" prop="eventId">
					<el-input
						v-model="queryData.eventId"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<el-form-item :label="$t('agent.audit_status') + ':'">
					<el-select
						v-model="queryData.auditStatus"
						style="width: 170px"
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in auditStatusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('agent.lock_status') + ':'">
					<el-select
						v-model="queryData.lockOrder"
						style="width: 120px"
						:popper-append-to-body="false"
					>
						<el-option
							:label="$t('common.all')"
							value=""
						></el-option>
						<el-option
							v-for="item in lockOrderType"
							:key="item.code"
							:label="item.description"
							:value="Number(item.code)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
				<!-- <p class="danger data-refresh">{{ $t('agent.data_update_time') }}： {{ now }}</p> -->
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:header-cell-style="getRowClass"
				highlight-current-row
				:max-height="tableHeight"
				@sort-change="_changeTableSort"
			>
				<el-table-column
					align="center"
					:label="$t('common.lock_order')"
					width="60"
				>
					<template slot-scope="scope">
						<el-checkbox
							v-if="
								// hasPermission('202031') &&
								scope.row.auditStatus === 0 ||
									scope.row.auditStatus === 1
							"
							v-model="scope.row.lockStatus"
							:disabled="disabledStatus(scope.row)"
							@change="lockChange(scope.row)"
						></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column
					prop="auditStep"
					align="center"
					:label="$t('common.actions')"
					:width="getWidth(130, 1.4)"
				>
					<template slot-scope="scope">
						<el-button
							v-if="
								// hasPermission('202032') &&
								Number(scope.row.auditStep) === 1
							"
							:class="auditBtnStatus(scope.row)"
							type="primary"
							size="medium"
							@click="goDetail(scope.row)"
						>
							{{
								typeFilter(
									scope.row.auditStep,
									'auditStepType'
								)
							}}
						</el-button>
						<el-button
							v-if="Number(scope.row.auditStep) === 0"
							type="success"
							size="medium"
							@click="goDetail(scope.row)"
						>
							{{
								typeFilter(
									scope.row.auditStep,
									'auditStepType'
								)
							}}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column
					prop="auditNum"
					align="center"
					:label="$t('agent.audit_number')"
					width="250"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.eventId || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('agent.transfer_member_account')"
					width="150"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.memberName"
							:title="scope.row.memberName"
							:copy="copy"
						/>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="currentProxyName"
					align="center"
					label="当前上级代理账号"
					width="150"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.currentProxyName"
							:title="scope.row.currentProxyName"
							:copy="copy"
						/>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="transferProxyName"
					align="center"
					:label="$t('agent.transfer_in_agent_account')"
					width="150"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.transferProxyName"
							:title="scope.row.transferProxyName"
							:copy="copy"
						/>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantId"
					align="center"
					:label="$t('common.belong_merchant')"
					width="230"
				>
					<template slot-scope="scope">
						<span>
							{{ merchantFilter(scope.row.merchantId) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="applyName"
					align="center"
					:label="$t('agent.apply_people')"
					width="150"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.applyName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="applyTime"
					align="center"
					:label="$t('agent.apply_time')"
					sortable="custom"
					width="200"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="applyInfo"
					align="center"
					:label="$t('agent.apply_info')"
					width="180"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.applyRemark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('agent.audit_status')"
					width="150"
				>
					<template slot-scope="scope">
						<span
							:class="
								Number(scope.row.auditStatus) === 1
									? 'lockingRgba'
									: Number(scope.row.auditStatus) ===
									2
									? 'normalRgba'
									: Number(scope.row.auditStatus) ===
									3
									? 'disableRgba'
									: 'deleteRgba'
							"
						>
							{{
								typeFilter(
									scope.row.auditStatus,
									'agentAuditStatus'
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="lockDatetime"
					align="center"
					width="180"
					:label="$t('agent.lock_order_time')"
				>
					<template slot-scope="scope">
						{{ scope.row.lockDatetime || '-' }}
					</template>
				</el-table-column>
				<el-table-column align="center" min-width="220">
					<template slot="header">
						<span>
							{{ $t('agent.audit_people') }}
							<br />
							{{ $t('agent.audit_complete_time') }}
						</span>
					</template>
					<template slot-scope="scope">
						{{ scope.row.auditName || '-' }}
						<p>{{ scope.row.auditDatetime || '-' }}</p>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<transformationDetail
			v-if="showDetail"
			slot="nonListContent"
			:type="type"
			:rowData="rowData"
			@goBack="goBack"
		></transformationDetail>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername, getUserInfo } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import { filterEmptyParams } from '@/utils'

const end = dayjs()
	.endOf('day')
	.valueOf()
const start = dayjs()
	.startOf('day')
	.valueOf()
export default {
	name: routerNames.transformationReview,
	components: {
		transformationDetail: () => import('./components/transformationDetail'),
		MainContent
	},
	mixins: [list],
	data() {
		this.fetchData = this.throttle(this.fetchData, 1000)
		this.lockChange = this.throttle(this.lockChange, 1000)
		return {
			tableHeight: 480,
			queryDateType: 1,
			selectSearchVal: '',
			otherDependenComponents: [],
			selectSearchType: 1,
			queryData: {
				userName: undefined,
				auditStatus: [],
				auditStep: '',
				transferProxyName: undefined,
				applyName: undefined,
				auditName: undefined,
				lockOrder: '',
				eventId: undefined,
				auditNum: undefined,
				orderType: undefined,
				orderKey: undefined
			},
			type: true,
			showDetail: false,
			applyTime: [],
			auditTime: [undefined, undefined],
			formTime: {
				time: [start, end],
				time2: []
			},
			rowData: {},
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			name: '',
			dataList: []
		}
	},
	computed: {
		accountType() {
			return this.globalDics.accountType || []
		},
		auditStatus() {
			return this.globalDics.auditStatus || []
		},
		auditStatusList() {
			return this.globalDics.agentAuditStatus
		},
		auditStepType() {
			return this.globalDics.auditStepType || []
		},
		lockOrderType() {
			return this.globalDics.lockStatus || []
		},
		accountTypeArr() {
			return this.globalDics.accountType || []
		}
	},
	watch: {
		$route: {
			handler(route, oldRoute) {
				const { query } = route
				this.queryData.eventId = query.eventId
				this.fetchData()
			},
			immediate: true
		}
	},
	mounted() {
		this.name = getUsername()
		this.userInfo = getUserInfo()
	},
	methods: {
		disabledStatus(row) {
			return (
				row.lockStatus &&
				(row.lockNameId
					? +row.lockNameId !== +this.userInfo.id
					: row.lockName !== this.name)
			)
		},
		auditBtnStatus(row) {
			return (row.lockNameId
			? +row.lockNameId !== +this.userInfo.id
			: row.lockName !== this.name)
				? 'dis'
				: ''
		},
		trimLR() {
			this.selectSearchVal = this.selectSearchVal.replace(/\s+/g, '')
		},
		_changeTableSort({ column, prop, order }) {
			const obj = {
				applyTime: 1
			}
			this.queryData.orderKey = obj[prop]
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.fetchData()
		},
		search() {
			this.pageNum = 1
			this.fetchData()
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.fetchData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.fetchData()
		},
		fetchData(query = {}) {
			this.loading = true

			// 审核时间
			const [applyStartTime, applyEndTime] = this.applyTime || []
			this.queryData.applyStartTime = applyStartTime
				? dayjs(applyStartTime).format('YYYY-MM-DD HH:mm:ss')
				: undefined
			this.queryData.applyEndTime = applyEndTime
				? dayjs(applyEndTime).format('YYYY-MM-DD HH:mm:ss')
				: undefined

			// 审核完成时间
			const [auditStartTime, auditEndTime] = this.auditTime || []
			this.queryData.auditStartTime = auditStartTime
				? dayjs(auditStartTime).format('YYYY-MM-DD HH:mm:ss')
				: undefined
			this.queryData.auditEndTime = auditEndTime
				? dayjs(auditEndTime).format('YYYY-MM-DD HH:mm:ss')
				: undefined

			let auditStatus = []

			if (this.queryData.auditStatus) {
				auditStatus = [this.queryData.auditStatus]
			}

			let params = {
				...this.queryData,
				auditStatus
			}
			params = {
				...this.getParams(params),
				// orderKey: 1,
				// orderType: 'desc'
				...query
			}
			this.$api
				.memberTransferSelectPage(filterEmptyParams(params))
				.then((res) => {
					if (res?.code === 200) {
						this.now = dayjs(new Date()).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						const { record, totalRecord } = res.data || {}
						this.loading = false
						this.dataList = Array.isArray(record) ? record : []
						if (this.dataList.length) {
							this.dataList.forEach((item) => {
								if (Number(item.lockStatus) === 1) {
									item.lockStatus = true
								} else {
									item.lockStatus = false
								}
							})
						}
						this.total = totalRecord || 0
					} else {
						this.loading = false
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		changeTableSort2({ column, prop, order }) {
			this.pageNum = 1
			this.queryData.orderKey = prop === 'applyTime' ? 1 : 2
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.fetchData()
		},
		goDetail(row) {
			this.type =
				row.lockStatus &&
				(row.lockNameId
					? +row.lockNameId === +this.userInfo.id
					: row.lockName === this.name)
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.dataList = []
			this.showDetail = false
			this.fetchData()
		},
		reset() {
			if (this.$route.query.eventId) {
				this.$router.replace({
					path: this.$route.path
				})
			}
			this.queryData = {
				userName: undefined,
				auditStatus: [],
				auditStep: '',
				transferProxyName: undefined,
				applyName: undefined,
				auditName: undefined,
				lockOrder: '',
				auditNum: undefined,
				orderType: undefined,
				orderKey: undefined,
				merchantId: undefined
			}
			this.queryDateType = 1
			this.selectSearchType = 1
			this.selectSearchVal = ''
			this.searchTime = [start, end]
			this.applyTime = []
			this.auditTime = [undefined, undefined]
			this.formTime = {
				time: [start, end],
				time2: []
			}
			this.fetchData()
		},
		lockChange(val) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.memberTransferLockOrder({
					merchantId: val.merchantId,
					id: val.id,
					lockOrderStatus: Number(val.lockStatus) === 0 ? 1 : 0
				})
				.then((res) => {
					if (res?.code === 200) {
						loading.close()
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.fetchData()
					} else {
						loading.close()
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
						this.fetchData()
					}
				})
				.catch(() => {
					this.fetchData()
					loading.close()
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
::v-deep .el-input-group__prepend {
	background-color: #fff;
}
</style>
